<template>
    <div class="indicators">
      <div v-for="(label, key) in labels" :key="key" class="indicator-item">
        <div class="indicator-header">
          <span class="label">{{ label }}</span>
        </div>
        <div class="indicator-value">
          <span>{{ indicators && indicators[key] ? indicators[key].toFixed(1) : '-' }}</span> <!-- 如果没有数据，显示 '-' -->
          <span class="unit">{{ units[key] }}</span>
        </div>
      </div>
    </div>
    <div v-if="!indicators || Object.keys(indicators).length === 0">
      
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, computed } from 'vue';
  import { reqMonitorAverageData } from "@/api/monitor/index.js"; // 导入 API 请求函数
  import useOperationStore from '@/store/operation';
  
  // 切换业务的数据对接处理
  let operationStore = useOperationStore();
  let operationId = ref(operationStore.data.length > 0 ? operationStore.data[operationStore.index].id : '');
  
  // 监听 operationStore 的变化，更新 operationId
  operationStore.$subscribe(async (mutation, state) => {
    operationId.value = operationStore.data[operationStore.index].id;
    await fetchWeatherData();  // 在切换业务时重新获取数据
  });
  
  // 用于存储气象指标数据
  const indicators = ref(null);
  
  // 显示的中文标签
  const labels = {
    dayAverageAirTemperature: '今日平均气温',
    monthAverageAirTemperature: '本月平均气温',
    yearAverageAirTemperature: '今年平均气温',
    dayAverageAirHumidity: '今日平均湿度',
    monthAverageAirHumidity: '本月平均湿度',
    yearAverageAirHumidity: '今年平均湿度',
    dayAverageSoilTemperature: '今日平均土壤温度',
    monthAverageSoilTemperature: '本月平均土壤温度',
    yearAverageSoilTemperature: '今年平均土壤温度',
    dayAverageSoilMoisture: '今日平均土壤湿度',
    monthAverageSoilMoisture: '本月平均土壤湿度',
    yearAverageSoilMoisture: '今年平均土壤湿度',
  };
  
  // 单位
  const units = {
    dayAverageAirTemperature: '°C',
    monthAverageAirTemperature: '°C',
    yearAverageAirTemperature: '°C',
    dayAverageAirHumidity: '%',
    monthAverageAirHumidity: '%',
    yearAverageAirHumidity: '%',
    dayAverageSoilTemperature: '°C',
    monthAverageSoilTemperature: '°C',
    yearAverageSoilTemperature: '°C',
    dayAverageSoilMoisture: '%',
    monthAverageSoilMoisture: '%',
    yearAverageSoilMoisture: '%',
  };
  
  // 获取气象指标数据的函数
  const fetchWeatherData = async () => {
    if (!operationId.value) return;  // 确保 operationId 存在
  
    const response = await reqMonitorAverageData(operationId.value);
    if (response.code === 0) {
      indicators.value = response.data; // 将返回的数据存入变量
      console.log(indicators.value); // 查看获取到的数据
    } else {
      console.error('获取气象指标数据失败');
    }
  };
  
  // 在组件挂载时获取数据
  onMounted(() => {
    fetchWeatherData(); // 加载初始数据
  });
  </script>
  
  <style lang="scss" scoped>
  .indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每行三列布局 */
    gap: 20px;
    padding: 10px 20px;
  }
  
  .indicator-item {
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: left;
    padding: 5px;
  }
  
  .indicator-header {
    font-size: 16px;
    color: #a5a5a5;
    margin-bottom: 5px;
  }
  
  .indicator-value {
    display: flex;
    justify-content: left;
    align-items: left;
    color: #343434;
    font-size: 20px;
    font-weight: bold;
  }
  
  .unit {
    font-size: 14px;
    color: #666;
    margin-left: 5px; /* 将单位显示在数值的右边 */
  }
  </style>
  